<template>
  <view class="content">
    <!-- 事务列表 -->
    <view class="switch-tab">
      <view
        v-for="tb in switchTabs" 
        :class="affairData.tabId == tb.id ? 'tab-item active' : 'tab-item'"
        @click="tabClick(tb)"
      >
        {{ tb.name }}
      </view>
    </view>
    <view class="only-me">
      <checkbox-group  @change="onlyMeChange">
        <label>
          <checkbox
            class="onlyme"
            value="onlyme"
            :checked="affairData.onlyMe"
            />
            只看我的
        </label>
        </checkbox-group>
        <view v-if="affairData.tabId == 1" class="create-btn" @click="toCreateAffair">新建</view>
        <view v-else class="create-btn"></view>
    </view>
    <!-- 列表 -->
    <view class="affair-box">
      <view
        v-for="item,index in affairData.data"
        @click.stop="toAffairDetail(item)"
        class="affair-row"
        :style="{color: item.affair_color}"
      >
        <view class="index">{{ index + 1}}、</view>
        <view class="date">{{ item.affair_dt }}</view>
        <view class="name">{{ item.affair_name }}</view>
        <image
          v-if="!item.is_store" 
          class="edit" src="/static/icons/editor.png"
          mode="aspectFit"
          @click.stop="toEditAffair(item)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { dateFormat } from '@/utils';
  import { callCloudFunction } from '@/utils/cloudfunc';
  const switchTabs = reactive([
    {
      id: 1,
      name: '事务列表',
      isStore: false
    },{
      id: 2,
      name: '已归档',
      isStore: true
    }
  ])
  const affairData = reactive({
    tabId: 1,
    onlyMe: false,
    page: 1,
    pageSize: 50,
    isStore: false,
    data: []
  })
  
  onShow(() => {
    readAffairList()
  })
  
  const readAffairList = () => {
    callCloudFunction({
      name: 'ume-affair',
      data: {action: 'read', params: {
        page: affairData.page,
        pageSize: affairData.pageSize,
        is_store: affairData.isStore,
        is_me: affairData.onlyMe
        }}
    }).then(res => {
      // console.log('查询成功:', res);
      affairData.data = res.data.map(item => {
        item.affair_dt = dateFormat(new Date(item.affair_date), '', true)
        return item
      })
    })
  }
  
  const tabClick = (t) => {
    affairData.tabId = t.id
    affairData.isStore = t.isStore
    readAffairList()
  }
  
  const onlyMeChange = (e) => {
    affairData.onlyMe = e.detail.value == 'onlyme'
    readAffairList()
  }
  
  const toAffairDetail = (rec) => {
    uni.navigateTo({
      url: '/pages/giftContact/portion/index?_id=' + rec._id
    })
  }
  
  const toEditAffair = (rec) => {
    uni.navigateTo({
      url: '/pages/giftContact/affairRec/editor?_id=' + rec._id
    })
  }
  
  
  const toCreateAffair = () => {
    uni.navigateTo({
      url: '/pages/giftContact/affairRec/editor'
    })
  }
</script>

<style lang="scss">
  .content {
    .switch-tab {
      display: flex;
      align-items: center;
      justify-content: space-around;
      line-height: 60rpx;
      .tab-item {
        width: 100%;
        text-align: center;
        // border: 1rpx solid #eee;
        background-color: #eee;
        &.active {
          background-color: #fff;
        }
      }
    }
    .only-me {
      padding: 10rpx;
      display: flex;
      justify-content: space-around;
      .onlyme {
        transform: scale(0.6);
      }
      .create-btn {
        color: $uni-color-primary;
        margin-left: auto;
        text-decoration: underline;
      }
      
    }
    .affair-box {
      .affair-row {
        display: flex;
        align-items: center;
        line-height: 80rpx;
        padding: 0 20rpx;
        border-bottom: 1px solid #eee;
        .date {
          margin:0 40rpx;
        }
        .name {
        }
        .edit {
         width: 40rpx;
         height:  40rpx;
         margin-left: auto;
        }
      }
    }
  }
</style>